<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_全屏遮罩层</title>
    <style>
      .mask {
        background-color: rgba(0, 0, 0, 0.2);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    </style>
</head>
<body>
  <div class="mask"></div>
  <div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias autem, consectetur debitis delectus
      distinctio dolor dolorum ducimus eum fuga illum magnam minima molestiae necessitatibus omnis pariatur quae rem
      temporibus.
    </div>
    <div>Aut commodi, cum deleniti dolor eveniet ipsa, laborum, non quasi sapiente sit tenetur ullam voluptates!
      Architecto aut blanditiis dolores explicabo fugiat, id quas reiciendis vitae! Cupiditate doloribus harum laborum
      recusandae.
    </div>
    <div>Atque eius expedita molestiae neque nesciunt quasi vitae. Accusantium alias aliquid consequatur, cum debitis
      deserunt eius ex expedita in, labore nam natus quae quis reiciendis repellendus, reprehenderit veniam voluptates!
      Culpa.
    </div>
    <div>Ab accusamus commodi, consequuntur dolores esse fugit id nam necessitatibus nemo nostrum, optio praesentium
      quos, tenetur. Amet animi blanditiis deleniti dolore earum in laudantium nemo quod ratione rem. Iste, omnis!
    </div>
    <div>Aliquid architecto asperiores assumenda autem earum eligendi esse maxime modi nobis nostrum numquam provident
      quia quo soluta, tenetur velit voluptatibus. Distinctio magnam numquam perspiciatis quam, quas quod repellat
      voluptates voluptatum!
    </div>
    <div>Accusantium alias at autem consequatur corporis dolorum et ex expedita, id illo illum incidunt inventore
      laborum laudantium nam nulla obcaecati officia perspiciatis quam repellendus reprehenderit sint sit vero voluptas
      voluptatem?
    </div>
    <div>Architecto cumque cupiditate inventore ipsam, iure nobis vel! Ab eius neque, non similique unde vel? Distinctio
      fugiat illum magni minima modi quae quas quisquam repellat! Asperiores blanditiis nesciunt obcaecati possimus.
    </div>
    <div>Ad beatae debitis eos eum odio quas quo voluptates? At aut, beatae deserunt dicta error, expedita fugit in
      labore odio perspiciatis placeat quam quasi, quos sapiente unde velit veniam vitae.
    </div>
    <div>Aut culpa cupiditate deserunt dignissimos dolores error eveniet exercitationem fugit harum, in minima nostrum
      perspiciatis possimus quia quibusdam quidem saepe similique sit ut voluptas. Animi dicta fuga ipsa libero
      officiis?
    </div>
    <div>Aspernatur commodi cum cupiditate dolore earum excepturi, exercitationem fugit ipsam laborum, libero minus
      molestias mollitia nisi nostrum obcaecati, quae sapiente soluta sunt tempora voluptate. Animi laudantium porro
      quod suscipit voluptatibus.
    </div>
    <div>Ad autem commodi, consequuntur cum dicta excepturi facilis iste laborum non rerum sit sunt voluptates. Amet
      asperiores consequatur eveniet, facere facilis iure quo. Eos, excepturi ipsum maxime numquam quia quisquam.
    </div>
    <div>Accusamus, amet consectetur molestiae perferendis reiciendis totam ut velit vero. Cum delectus in ipsum non
      odio pariatur ratione sequi! Accusamus, eum sequi? Dolores eaque eius necessitatibus quidem sapiente. Animi,
      omnis.
    </div>
    <div>Adipisci assumenda commodi consequuntur deleniti ducimus eaque pariatur quos tenetur! Accusantium aut culpa
      dolorum, enim obcaecati possimus quaerat. Aspernatur autem consequuntur dicta, magnam quia rerum tempore. Magnam
      odit perspiciatis similique.
    </div>
    <div>Beatae blanditiis consectetur, dignissimos ea et eum facilis harum illum incidunt iure iusto perferendis
      reiciendis, rem sunt, velit. Accusamus delectus eos ex explicabo illo maiores neque quos repellendus tempora
      totam.
    </div>
    <div>Alias aspernatur cum earum, eligendi nemo quia. Debitis deserunt distinctio, eum hic numquam quaerat vero. Ad
      consequuntur cum earum eligendi fugit libero, nisi numquam obcaecati officiis quidem, reprehenderit ut voluptates?
    </div>
    <div>Commodi cumque libero rem. Ad, aliquam aspernatur aut consectetur dolorum magni. Adipisci aperiam assumenda
      dolorem exercitationem facere facilis, fugiat illum impedit incidunt, iure iusto praesentium quo ratione
      repellendus unde vel.
    </div>
    <div>Animi aspernatur harum illum repellendus voluptatum. A aliquid deleniti dicta dolores eveniet nam temporibus
      ullam ut voluptate voluptates. Eum, minima, ratione! Corporis eius et fugit inventore necessitatibus officia
      recusandae ullam.
    </div>
    <div>Dolores dolorum facilis magni nisi officiis porro saepe. Blanditiis consequatur error est explicabo in,
      maiores, minima nobis numquam provident quae quia rerum sequi soluta? Amet dolor et impedit sit veritatis.
    </div>
    <div>Architecto, aspernatur assumenda commodi cupiditate delectus deleniti eos inventore iusto laboriosam natus odit
      perferendis quibusdam quidem quis, quod ratione repudiandae sapiente tempora voluptatem voluptatum? Aliquam
      dolorum iusto natus nesciunt ratione.
    </div>
    <div>Ab alias aperiam aut autem culpa maiores, modi nisi optio quos. Ad, blanditiis est et excepturi maiores
      mollitia nemo officia pariatur praesentium quidem rem similique tempore veritatis. Autem earum, tenetur.
    </div>
    <div>Accusamus beatae deserunt distinctio doloremque dolores error, ex fuga nam, necessitatibus officia quasi quod
      reiciendis rem tempora, velit veniam vitae voluptatum. Alias consequatur exercitationem laboriosam minima modi
      numquam repellendus sint.
    </div>
    <div>Animi, consequuntur cupiditate debitis ducimus eius labore laudantium modi nesciunt odio officia officiis
      voluptas, voluptatibus! Commodi cumque doloribus et fugiat maxime porro quos, repellat voluptate. Architecto nemo
      quibusdam rerum suscipit?
    </div>
    <div>Debitis delectus hic itaque nobis obcaecati officia recusandae soluta suscipit vel! Amet assumenda doloremque
      eaque enim minima perspiciatis. Dolores eaque explicabo harum libero odio perferendis quo! Dolorum et harum
      voluptate!
    </div>
    <div>Aliquid architecto assumenda aut delectus dolore doloremque doloribus, ducimus eos facere in incidunt itaque
      iure laborum minima molestiae natus nobis non quam qui quia, quisquam repudiandae sint suscipit totam vel!
    </div>
    <div>Dignissimos doloremque doloribus eligendi libero quae quaerat voluptate voluptatibus! Consectetur deserunt
      dolore esse laudantium mollitia officia, quaerat reiciendis vero. Ad consequuntur dignissimos facilis iste, minus
      quaerat quam quidem repellendus totam.
    </div>
    <div>Atque, commodi eaque earum facere facilis fugit necessitatibus, placeat quasi qui sint vero voluptates
      voluptatum. A cumque doloribus earum facilis fugit laboriosam minus nisi quaerat quibusdam sapiente sunt, ullam
      vitae?
    </div>
    <div>Alias amet animi aperiam cumque deserunt dolorem eligendi facere incidunt ipsam ipsum itaque iusto libero
      molestiae mollitia necessitatibus nihil nisi perspiciatis praesentium quam quibusdam quidem quo sequi, sint soluta
      voluptatem.
    </div>
    <div>Ab ad alias cupiditate dolorem dolores, ducimus eius ipsum maiores natus quam quis, repellat rerum sint
      temporibus totam, veniam voluptate! Dolorem et illum impedit ipsum maxime numquam omnis, quibusdam quod.
    </div>
    <div>Ad amet asperiores ducimus facere officia, quas quo quos repudiandae saepe tempora. Aliquam consequatur
      excepturi laborum modi, perspiciatis reprehenderit tenetur. A animi dignissimos eligendi eveniet id itaque
      molestias pariatur voluptatem.
    </div>
    <div>Accusamus alias animi, asperiores autem culpa fugiat impedit in ipsam magnam magni minima neque praesentium,
      qui quis quo rem, rerum sequi. Adipisci amet distinctio libero officia placeat rem totam! Repudiandae!
    </div>
    <div>Beatae consequuntur cum delectus deleniti ipsa iste iure magnam, magni maxime non optio pariatur quaerat quas
      sed sint unde veritatis voluptates. Id libero minus repellendus reprehenderit. Eum officia omnis quam.
    </div>
    <div>A ad aliquam debitis eligendi excepturi harum iusto nemo non perspiciatis, porro provident quos recusandae rem
      sapiente sed sequi voluptatum. Corporis doloremque error laudantium nulla quae qui quia soluta velit.
    </div>
    <div>Delectus eius illo neque temporibus! Accusantium consectetur corporis, dicta doloribus eum eveniet expedita hic
      laborum magni necessitatibus quibusdam, totam veniam, veritatis! Dolorum ea iusto magnam obcaecati, officia
      perspiciatis quos voluptatum.
    </div>
    <div>Alias aliquid aperiam aspernatur, atque deserunt dignissimos, dolore dolores facere illo inventore itaque
      laborum magnam magni nisi non optio repudiandae sequi similique vel veritatis? Accusamus alias deserunt itaque
      necessitatibus quos.
    </div>
    <div>Accusamus blanditiis consequuntur corporis dolores, eaque earum fugiat impedit iure iusto laboriosam minima
      numquam quam quibusdam reiciendis sequi similique, voluptate. Ad delectus dignissimos facere labore molestiae
      omnis, qui tenetur? Vitae.
    </div>
    <div>Asperiores ea eaque enim error, eum facilis harum id in iure labore molestias neque nisi non perspiciatis
      placeat quam quidem veritatis! Accusamus debitis deleniti fugiat in itaque minima numquam, saepe!
    </div>
    <div>Ad amet cum deserunt maiores mollitia optio quod repellat ut. Autem consequatur culpa, eius excepturi fugiat in
      ipsa ipsum laudantium nesciunt odio pariatur saepe sit suscipit tempore veritatis vitae voluptatum.
    </div>
    <div>Amet aperiam aut autem culpa distinctio eius enim eveniet ipsam libero mollitia necessitatibus nulla omnis,
      quasi tempora veritatis voluptates voluptatum? Animi doloribus incidunt inventore iure laborum neque quae quaerat
      velit.
    </div>
    <div>A architecto at exercitationem expedita nam neque nisi non provident sequi ullam? Accusamus aspernatur culpa
      delectus distinctio ducimus earum, eius, illum iste magni pariatur quibusdam quisquam quod rem voluptate
      voluptates?
    </div>
    <div>Animi distinctio eligendi eos est expedita facere illo illum in ipsum magni, minima modi necessitatibus
      nesciunt nobis nulla, obcaecati odit praesentium provident recusandae rem reprehenderit sequi ullam vel.
      Laudantium, molestias.
    </div>
    <div>Accusantium doloremque doloribus eaque et inventore ipsa iusto minima molestiae, necessitatibus nisi nostrum
      perspiciatis, porro possimus quasi sed. Earum eligendi eum laudantium modi odio ullam, voluptas. Asperiores atque
      beatae unde.
    </div>
    <div>Ab at aut beatae blanditiis corporis deleniti, ea eaque, excepturi id illo ipsa laborum laudantium nemo
      nesciunt nihil nobis officia quae quam quos ratione reiciendis sequi sit suscipit temporibus voluptate?
    </div>
    <div>Atque consequuntur necessitatibus voluptatem? Ab atque aut autem, consequatur dignissimos doloremque eos est
      eveniet harum iure iusto mollitia natus nostrum, quaerat sapiente sed tempore temporibus unde? Aliquam debitis
      perspiciatis porro.
    </div>
    <div>Alias aliquam cumque eius enim incidunt perferendis possimus quaerat, quia sequi tempora! Est fuga maxime quasi
      recusandae saepe sunt veritatis. Ea esse est eveniet natus perspiciatis rem, soluta ullam voluptate.
    </div>
    <div>Alias atque, cum cupiditate deserunt ducimus esse ex illo laborum rem ut! Aliquid amet architecto commodi
      cumque dolores eos esse laboriosam maiores mollitia optio, placeat recusandae tempore totam ullam vitae.
    </div>
    <div>Accusamus beatae corporis doloribus ducimus ea eaque earum esse ex harum ipsum itaque, minima natus non officia
      quae ratione sapiente suscipit! Cupiditate dicta eaque magnam quae quo ratione sapiente voluptatibus.
    </div>
    <div>A alias aspernatur corporis distinctio dolores ducimus eligendi enim, est fuga illo, inventore itaque
      laboriosam magni molestiae nam natus, nihil nisi officia possimus quibusdam quod ratione reprehenderit similique
      vitae voluptates?
    </div>
    <div>A assumenda atque cumque cupiditate dignissimos id magnam quaerat reiciendis repellendus, sapiente. Assumenda
      atque aut consequuntur debitis eaque enim excepturi exercitationem expedita in inventore ipsum iusto perferendis
      porro, sed, soluta!
    </div>
    <div>Atque aut, autem consequatur delectus dolorem esse excepturi fuga ipsam iure libero maxime minus molestiae
      natus nisi pariatur perspiciatis quasi quidem quod reiciendis repellat repellendus repudiandae, similique tempora
      ullam voluptatum.
    </div>
    <div>A accusantium alias atque consectetur error, ex expedita in incidunt iure molestiae mollitia nostrum nulla odit
      quaerat qui quidem quo quod reiciendis tempore vel veniam veritatis voluptate, voluptatibus! Consequuntur, ipsam.
    </div>
    <div>Aspernatur assumenda atque cupiditate debitis distinctio earum esse est et eveniet exercitationem expedita id
      libero nemo nostrum, optio placeat praesentium, quos ratione saepe vitae! Dolore eaque officia optio ratione
      voluptate!
    </div>
    <div>A adipisci architecto aut blanditiis commodi deleniti, deserunt distinctio dolor dolorem ea enim eum eveniet ex
      excepturi hic id illum maxime nisi omnis placeat provident quaerat quasi repudiandae tenetur veritatis.
    </div>
    <div>Ex fugit ipsa quaerat quas! Asperiores beatae consequuntur dicta harum illum, in inventore nisi, optio quasi
      quos sapiente ullam velit vitae. Ab facilis id minus mollitia nulla quia quo repudiandae.
    </div>
    <div>Amet aspernatur at atque consequatur consequuntur, cum deserunt dignissimos eaque error est labore minima nihil
      non odit, quaerat qui quos repudiandae sunt temporibus tenetur unde voluptas voluptatum. Optio, tenetur voluptate?
    </div>
    <div>Blanditiis doloremque earum, error fugiat, fugit itaque numquam obcaecati, odio praesentium recusandae
      similique sunt temporibus voluptatem. Accusamus accusantium aperiam, asperiores aut eum id iusto laboriosam
      laudantium optio provident. Hic, numquam!
    </div>
    <div>At atque commodi dolore ducimus excepturi ipsa itaque nam nesciunt nihil, officiis placeat porro quo veniam.
      Eum quidem saepe velit. Deserunt dicta eaque excepturi nesciunt quasi, suscipit voluptates? Cumque, dolores!
    </div>
    <div>Deleniti ducimus iure nisi, officia quidem quisquam voluptatem. A aliquid consequatur hic maxime, obcaecati
      pariatur praesentium qui quia, quisquam ratione, voluptatem voluptatibus? Laudantium, unde, voluptatibus.
      Architecto beatae fuga incidunt neque.
    </div>
    <div>Animi consequuntur delectus dolorem excepturi illum iure laboriosam mollitia perferendis placeat quas, quo quos
      ratione recusandae repellat reprehenderit soluta tenetur? Animi deserunt eaque eum natus nulla officia, quod.
      Accusamus, nisi!
    </div>
    <div>Corporis doloribus eos ipsa magni nemo sapiente unde voluptatem? Consectetur ducimus eligendi incidunt iste
      maiores necessitatibus neque quod temporibus. Accusamus aliquam atque modi suscipit. Doloribus fuga qui
      repudiandae temporibus totam.
    </div>
    <div>Aperiam explicabo facere inventore odio sint sunt suscipit veniam. Delectus eius minima ratione! Asperiores
      eligendi error, officiis sed ullam ut voluptas. Atque delectus dolorum maiores minima nam possimus, recusandae
      vitae?
    </div>
  </div>
</body>
</html>